<template>
  <page-meta root-font-size="52px">
    <view class="article-detail-container">
      <!-- 头部区域 -->
      <view class="top-box">
        <view class="top-box-title">{{ articleDetail.articleTitle }}</view>
        <view class="top-box-middle">
          <view class="left">
            <view class="left-left"
              ><image
                :src="articleDetail.avatar"
                mode="aspectFill"
                class="avatar"
            /></view>
            <view class="left-right">
              <text class="txt-top">{{ articleDetail.nickName }}</text>
              <text class="txt-bottom">{{ articleDetail.date }}</text>
            </view>
          </view>
          <view class="right">
            <button
              size="mini"
              @click="onFollowClick"
              :Loading="isFollowing"
              :type="articleDetail.isFollow ? 'primary' : 'default'"
            >
              {{ articleDetail.isFollow ? "已关注" : "关注" }}
            </button>
          </view>
        </view>
      </view>
      <!-- 中部区域 -->
      <view class="middle-box" v-if="articleDetail">
        <!-- <rich-text :nodes="articleDetail.content"></rich-text> -->
        <mpHtml
          class="markdown_views"
          :content="addClassFromHTML(articleDetail.content)"
          scroll-table
        ></mpHtml>
      </view>
      <!-- 尾部 -->
      <view class="bottom-box">
        <article-comment-list
          ref="mescrollItem"
          :articleId="articleId"
        ></article-comment-list>
      </view>
      <!-- 功能区 -->
      <article-bottom
        @changeIsPraise="onChangeIsPraise"
        @onComment="onCommentClick"
        :articleId="articleId"
        :articleDetail="articleDetail"
      ></article-bottom>
      <!-- 评论区popup -->
      <uni-popup ref="popup" type="bottom" @change="popupChange">
        <article-comment-commit
          v-if="isShowPopup"
          :articleId="articleId"
          @commentSuccess="onCommentSuccess"
        ></article-comment-commit>
      </uni-popup>
    </view>
  </page-meta>
</template>

<script>
import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
import { getArticleDetailAPI } from "../../../apis/article";
import { userFollowAPI } from "../../../apis/user";
import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html";
import ArticleBottom from "../../../components/article-bottom/article-bottom.vue";
import { mapActions } from "vuex";
import ArticleCommentCommit from "../../../components/article-comment-commit/article-comment-commit.vue";
export default {
  components: {
    mpHtml,
    ArticleBottom,
    ArticleCommentCommit,
  },
  mixins: [MescrollCompMixin],
  data() {
    return {
      author: null,
      articleId: null,
      articleDetail: null,
      isFollowing: false,
      isShowPopup: false,
    };
  },
  created() {
    // this.getArticleDetailData()
  },
  onLoad(options) {
    // console.log('onload');
    this.author = options.author;
    this.articleId = options.articleId;
    this.getArticleDetailData();
  },
  methods: {
    ...mapActions("user", ["isLogin"]),
    async getArticleDetailData() {
      uni.showLoading({ title: "loading" });
      const { data: res } = await getArticleDetailAPI({
        author: this.author,
        articleId: this.articleId,
      });
      this.articleDetail = res.data;
      // console.log('author'+this.author);
      // console.log('articleId'+this.articleId);
      // console.log(res);
      // console.log(this.articleDetail);
    },
    addClassFromHTML(info) {
      return info
        .replace(/<p>/gi, '<p class="p-cls">')
        .replace(/<a>/gi, '<a class="a-cls">')
        .replace(/<h1>/gi, '<h1 class="h1-cls">')
        .replace(/<h2>/gi, '<h2 class="h2-cls">')
        .replace(/<h3>/gi, '<h3 class="h3-cls">')
        .replace(/<h4>/gi, '<h4 class="h4-cls">')
        .replace(/<h5>/gi, '<h5 class="h5-cls">')
        .replace(/<h6>/gi, '<h6 class="h6-cls">')
        .replace(/<ul>/gi, '<ul class="ul-cls">')
        .replace(/<li>/gi, '<li class="li-cls">')
        .replace(/<ol>/gi, '<ol class="ol-cls">')
        .replace(/<td>/gi, '<td class="td-cls">')
        .replace(/<th>/gi, '<th class="th-cls">')
        .replace(/<tr>/gi, '<tr class="tr-cls">')
        .replace(/<dl>/gi, '<dl class="dl-cls">')
        .replace(/<dd>/gi, '<dd class="dd-cls">')
        .replace(/<hr>/gi, '<hr class="hr-cls">')
        .replace(/<pre>/gi, '<pre class="pre-cls">')
        .replace(/<strong>/gi, '<strong class="strong-cls">')
        .replace(/<input>/gi, '<input class="input-cls">')
        .replace(/<table>/gi, '<table class="table-cls">')
        .replace(/<details>/gi, '<details class="details-cls">')
        .replace(/<code>/gi, '<code class="code-cls">')
        .replace(/<kbd>/gi, '<kbd class="kbd-cls">')
        .replace(/<summary>/gi, '<summary class="summary-cls">')
        .replace(/<blockquote>/gi, '<blockquote class="blockquote-cls">')
        .replace(/<img/gi, '<img class="img-cls"');
    },
    async onFollowClick() {
      const res = this.isLogin();
      if (!res) {
        return;
      }
      this.isFollowing = true;
      const { data: result } = await userFollowAPI({
        author: this.author,
        isFollow: !this.articleDetail.isFollow,
      });
      this.articleDetail.isFollow = !this.articleDetail.isFollow;
      this.isFollowing = false;
    },
    onCommentClick() {
      // console.log("Father Received");
      this.$refs.popup.open();
    },
    popupChange(e) {
      // console.log(e);
      if (e.show) {
        this.isShowPopup = e.show;
      } else {
        setTimeout(() => {
          this.isShowPopup = e.show;
        }, 100);
      }
    },
    onCommentSuccess(res) {
      this.$refs.popup.close();
      this.isShowPopup = false;
      this.$refs.mescrollItem.addComment(res);
    },
    onChangeIsPraise(val){
      this.articleDetail.isPraise = val
    }
  },
};
</script>

<style lang="scss">
@import url(../../../styles/articleDetail.css);
.article-detail-container {
  padding: 15px 10px;
  padding-bottom: 108px;
  display: flex;
  flex-direction: column;
  .top-box {
    .top-box-title {
      font-size: 20px;
      color: $uni-main-color;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .top-box-middle {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .left-left {
          //width: 35px;
          //height: 35px;
          //border-radius: 50%;
          //overflow: hidden;
        }
        .left-right {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-left: 5px;
          .txt-top {
            font-size: 14px;
            font-weight: 700;
            color: #333333;
          }
          .txt-bottom {
            font-size: 12px;
            color: #999;
          }
        }
      }
      .right {
        button {
          height: 25px;
        }
      }
    }
  }
  .middle-box {
  }
  .bottom-box {
  }
}
</style>
